<template>
  <div class="top-container night">
    <div class="left-box">
      <div class="logo">
        <div class="logo1">Mintser.cn</div>
        <div class="logo2">Mintser.cn</div>
      </div>
      <div class="history-wrapper">
        <span class="iconfont icon-arrow-lift" @click="back"></span>
        <span class="iconfont icon-arrow-right" @click="forward"></span>
      </div>
      <div class="right-box">
        <div class="el-input el-input--small el-input--prefix">
          <input type="text" autocomplete="off" placeholder="搜索" class="el-input__inner" v-model="inputValue"
            @keyup.enter="toResult" />
          <span class="el-input__prefix">
            <i class="el-input__icon el-icon-search"></i>
          </span>
        </div>
      </div>
    </div>
    <img src="../assets/sakra.png" alt="">
    <div class="extraContent">
      <span>侧边栏 </span>
      <el-switch v-model="sideTab" active-color="#409eff">
      </el-switch>
      <span>音乐栏 </span>
      <el-switch v-model="MusicTab"  active-color="#409eff">
      </el-switch>
      <!-- 下拉菜单 -->
      <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><a href="https://gitee.com/night-to" target="_blank">gitee地址</a></el-dropdown-item>
            <el-dropdown-item><a href="https://github.com/Jing-9" target="_blank">github地址</a></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'top',
    data() {
      return {
        query: '',
        inputValue: '',
        sideTab: true,
        MusicTab: true,
      }
    },
    watch:{
      MusicTab(){
        this.$bus.$emit('changeMusicTab',this.MusicTab)
      },
      sideTab(){
        this.$bus.$emit('changeSideTab',this.sideTab)
      }
    },
    methods: {
      toResult() {
        if (this.inputValue === '') {
          return this.$message.error('请输入内容')
        } else {
          this.$router.push(`/result?q=${this.inputValue}`)
        }
      },
      back() {
        this.$router.back()
      },
      forward() {
        this.$router.back(1)
      },
    },
  }
</script>

<style scoped>
  .el-dropdown {
    color: #fff;
    cursor: pointer;
  }
  a {
    color: #000;
  }
</style>